<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>查看查看</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/currency.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
  </head>
<body>
    <div class="main-content">
        <div class="nav-list-title">
            <ul class="list-title-crumbs">
                <li>
                  <i class="fa fa-map-marker mainTone"></i>
                  <a class="text">客户列表</a>
                  <i class="fa fa-angle-right"></i>
                </li>
                <li><a class="mainTone">查看详情</a></li>
            </ul>
        </div>
        <div class="line-list-btn">
            <button class="btn">新增认购</button>
            <button class="btn">新增签约</button>
            <button class="btn">写跟进</button>
            <button class="btn">分配</button>
            <button class="btn">编辑</button>
        </div>
        <div class="item-info-surround mar-nb">
            <h3 class="item-title">联系信息</h3>
            <ul class="exhibition-list">
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">经纪人：</label>
                        <div class="template-controls">
                            王凯
                        </div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">创建人：</label>
                        <div class="template-controls">
                            王凯
                        </div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">项目名称：</label>
                        <div class="template-controls">112233</div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">意向等级：</label>
                        <div class="template-controls">D</div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">客户名称：</label>
                        <div class="template-controls">孙婷婷</div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">客户状态：</label>
                        <div class="template-controls">问询</div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">联系电话：</label>
                        <div class="template-controls">13817750496
                            <a href="javascript:;" class="dialBtn"><i class="fa fa-phone"></i>拨号</a>
                        </div>
                    </div>
                </li>
                <li class="col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">获取途径：</label>
                        <div class="template-controls">中介</div>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="nav-list-cell">
          <li class="active"><a href="javascript:;">客户资料</a><span class="col">|</span></li>
          <li><a href="javascript:;">意向房源</a><span class="col">|</span></li>
          <li><a href="javascript:;">跟进记录</a><span class="col">|</span></li>
          <li><a href="javascript:;">认购（0）</a><span class="col">|</span></li>
          <li><a href="javascript:;">签约（0）</a></li>
        </ul>
        <ul class="info-details-list">
            <li class="details-list-li active">
                <div class="item-info-surround">
                    <h3 class="item-title">客户购房需求</h3>
                    <ul class="exhibition-list">
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">置业动机：</label>
                                <div class="template-controls">测试</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">关注重点：</label>
                                <div class="template-controls">文化氛围</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">需求面积：</label>
                                <div class="template-controls">100m²</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">需求楼层：</label>
                                <div class="template-controls">超高层</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title title-row-two">希望庭院具备功能：</label>
                                <div class="template-controls">游泳池</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">付款方式：</label>
                                <div class="template-controls">银行卡</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item-info-surround">
                    <h3 class="item-title">首次接触信息</h3>
                    <ul class="exhibition-list">
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">v接触方式：</label>
                                <div class="template-controls">测试</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">接触时间：</label>
                                <div class="template-controls">孙婷婷</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">沟通内容：</label>
                                <div class="template-controls">调监控</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item-info-surround">
                    <h3 class="item-title">客户个人信息</h3>
                    <ul class="exhibition-list">
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">证件类型：</label>
                                <div class="template-controls">身份证</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">户籍所在地：</label>
                                <div class="template-controls">中国</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">证件号码：</label>
                                <div class="template-controls">123123123123123123</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">联系地址：</label>
                                <div class="template-controls">ADV</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">出生日期：</label>
                                <div class="template-controls">1992-10-16</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item-info-surround bor-nb">
                    <h3 class="item-title">客户个人信息</h3>
                    <div class="table-responsive ">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>证件类型</th>
                                    <th>证件号码</th>
                                    <th>生日</th>
                                    <th>结婚纪念日</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>王木木</td>
                                    <td>身份证</td>
                                    <td>123123123123123123</td>
                                    <td>1992-10-16</td>
                                    <td>2016-10-16</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="item-info-surround">
                    <h3 class="item-title">家庭住宅情况</h3>
                    <ul class="exhibition-list">
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">证件类型：</label>
                                <div class="template-controls">身份证</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">户籍所在地：</label>
                                <div class="template-controls">中国</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">证件号码：</label>
                                <div class="template-controls">123123123123123123</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">联系地址：</label>
                                <div class="template-controls">ADV</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">出生日期：</label>
                                <div class="template-controls">1992-10-16</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item-info-surround">
                    <h3 class="item-title">联系信息</h3>
                    <ul class="exhibition-list">
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">工作日联系时间：</label>
                                <div class="template-controls">9：00-18：00</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">周末联系时间：</label>
                                <div class="template-controls">9：00-18：00</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">工作日联系方式：</label>
                                <div class="template-controls">电话</div>
                            </div>
                        </li>
                        <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">周末联系方式：</label>
                                <div class="template-controls">电话</div>
                            </div>
                        </li>
                         <li class="col-md-6">
                            <div class="currency-template-query">
                                <label class="template-title">备注：</label>
                                <div class="template-controls">备注备注备注备注</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="details-list-li">111</li>
            <li class="details-list-li">222</li>
            <li class="details-list-li">333</li>
            <li class="details-list-li">444</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    $(function(){
        $(".nav-list-cell li").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            var num = $(this).index();
            showInfoDtails(num);
        })

        function showInfoDtails(index){
            $(".info-details-list .details-list-li").eq(index).addClass().addClass("active").siblings().removeClass("active");
        }
    })
</script>
</html>
